<template>
  <div class="blessing-message" @mouseenter="isHover = true" @mouseleave="isHover = false" ref="parent">
    <div class="blessing-message__container container-content">
      <div v-show="modelValue?.title" class="blessing-message__title" v-html="modelValue?.title"></div>
      <div class="d-none d-md-flex row row-cols-2">
        <div class="col">
          <div
            v-for="(item, idx) in listLeft"
            :key="`${item.name}-${item.label}-${item.image_url}-${idx}`"
            class="blessing-message__card-wrapper"
          >
            <div class="blessing-message__card">
              <BlessingMessageCard
                @click="cardClickHandler(item)"
                v-bind="item"
                :type="idx * 2"
              />
            </div>
          </div>
        </div>
        <div class="col">
          <div
            v-for="(item, idx) in listRight"
            :key="`${item.name}-${item.label}-${item.image_url}-${idx}`"
            class="blessing-message__card-wrapper"
          >
            <div class="blessing-message__card">
              <BlessingMessageCard
                @click="cardClickHandler(item)"
                v-bind="item"
                :type="idx * 2 + 1"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="d-md-none row row-cols-1">
        <div class="col">
          <div
            v-for="(item, idx) in list"
            :key="`${item.name}-${item.label}-${item.image_url}-${idx}`"
            class="blessing-message__card-wrapper"
          >
            <div class="blessing-message__card">
              <BlessingMessageCard
                @click="cardClickHandler(item)"
                v-bind="item"
                :type="idx"
              />
            </div>
          </div>
        </div>
      </div>

      <div v-if="totalPage > 0" class="flex-center mt-9 mt-md-22">
        <BlessingMessagePagination
          :totalPage="totalPage"
          :currentPage="currentPage"
          @changePage="currentPage = $event"
        />
      </div>
    </div>

    <LightboxBlessingMessage v-model:visible="visible" :componentProps="focusObj" />
    <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handle-paste="handlePaste"></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, nextTick } from 'vue'
import BlessingMessageCard from './BlessingMessageCard.vue'
import BlessingMessagePagination from './BlessingMessagePagination.vue'
import LightboxBlessingMessage from '@/common/LightboxBlessingMessage/index.vue'
import Operate from '@/common/Operate/index.vue'
import Setting from './setting.vue'
import { randomString } from '@/utils/common'
import { http } from '@/utils/http'

defineOptions({
  name: 'BlessingMessage'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true
  },

  website: {
    type: String,
    default: 'ywies-tx'
  },

  locale: {
    type: String,
    default: 'sc'
  }
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste', 'showLightboxVideo', 'showLightboxImage'])

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'BlessingMessage',
    api: props.modelValue?.api || '/blessing-board/blessing-messages/list',
    title: props.modelValue?.title || '这里是标题'
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

handleInit()

const parent = ref<HTMLElement | null>(null)
const currentPage = ref(1)
const pageSize = ref(6)
const totalPage = ref(1)
const list = ref<any[]>([])
const focusObj = ref<any>(null)

const listLeft = computed(() => list.value.filter((_v: any, i: number) => (i + 1) % 2))
const listRight = computed(() => list.value.filter((_v: any, i: number) => !((i + 1) % 2)))

const getList = async () => {
  const config = {
    headers: {
      website: `${props.website}-${props.locale}`,
    },
  }
  const url = `${props.modelValue?.api}?per_page=${pageSize.value}&page=${currentPage.value}`
  try {
    const { data } = await http.get(url, config)
    totalPage.value = data.meta.last_page
    list.value = data.data
  } catch (e) {
    totalPage.value = 1
    list.value = []
  }
}

const scrollTo = (ele: HTMLElement | null) => {
  if (!ele || typeof window === 'undefined') return
  const screenWidth = window.innerWidth
  const fixPx = screenWidth >= 768 ? (screenWidth >= 1024 ? 170 : 120) : 100
  const rect = ele.getBoundingClientRect()
  const top = rect.top + window.pageYOffset - fixPx
  window.scroll({ top: top, left: 0, behavior: 'smooth' })
}

const visible = ref(false)
const cardClickHandler = (item: any) => {
  focusObj.value = item
  visible.value = true
}

watch(currentPage, () => {
  nextTick(() => {
    getList()
    scrollTo(parent.value)
  })
})

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.blessing-message {
  position: relative;
}

.d-none {
  display: none!important
}

@media (min-width: 768px) {
  .d-md-flex {
    display: flex!important
  }

  .d-md-none {
    display: none!important
  }
}

.row {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y)*-1);
  margin-right: calc(var(--bs-gutter-x)*-0.5);
  margin-left: calc(var(--bs-gutter-x)*-0.5)
}

.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x)*0.5);
  padding-left: calc(var(--bs-gutter-x)*0.5);
  margin-top: var(--bs-gutter-y)
}

.col {
  flex: 1 0 0%
}

.row-cols-1>* {
  flex: 0 0 auto;
  width: 100%
}

.row-cols-2>* {
  flex: 0 0 auto;
  width: 50%
}

.flex-center {
  justify-content: center
}

.flex-between,.flex-center {
  display: flex;
  align-items: center
}

.mt-9 {
  margin-top: 36px!important
}

.mt-md-22 {
  margin-top: 88px!important
}

@media (min-width: 1280px) {
  .blessing-message__container {
    --max-width: clamp(952px, calc((100vw - 1280px) / 1.311 + 952px), 1440px);
  }
}

.blessing-message__title {
  margin-bottom: 16px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  color: #0032a0;
}
@media (max-width: 1023.98px) {
  .blessing-message__title, .blessing-message__title * {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
  }
}

@media (max-width: 1279.98px) {
  .blessing-message__title {
    margin-bottom: 3px;
  }
}

@media (max-width: 767.98px) {
  .blessing-message__title {
    margin-bottom: 21px;
  }
}

@media (max-width: 767.98px) {
  .blessing-message__title, .blessing-message__title * {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .015em;
  }
}

.blessing-message .row {
  --bs-gutter-x: 22px;
  --bs-gutter-y: 0;
}

.blessing-message .row .col:nth-child(even) {
  margin-top: 39px;
}

@media (max-width: 767.98px) {
  .blessing-message .row .col:nth-child(even) {
    margin-top: 0;
  }
}

.blessing-message .row .col .blessing-message__card-wrapper {
  margin-top: 26px;
}

@media (max-width: 767.98px) {
  .blessing-message .row .col .blessing-message__card-wrapper {
    margin-top: 21px;
  }
}
</style>